<template>
	<div class="j-login">
		<j-header :indexNum="1"></j-header>
		<div class="login-box">
			<h3>用户登录</h3>
			<div class="input-group">
				<input type="text" v-model="phone" placeholder="用户名" name="phone"><br>
				<span>{{phoneTip}}</span>
			</div>
			<div class="input-group">
				<input type="password" v-model="password" placeholder="密码" name="password"><br>
				<span>{{pwTip}}</span>
			</div>
			<!--<div class="input-group input-code">-->
				<!--<input type="text" v-model="code" placeholder="验证码" class="code" id="code_input">-->
				<!--<j-identify></j-identify>-->
				<!--<span>{{codeTip}}</span>-->
			<!--</div>-->
			<div>
				<button @click="subLogin()" class="btn-login">登录</button>
			</div>
			<div>
				<router-link to="/register" >去注册</router-link>
				<router-link to="/forgotpw" >忘记密码</router-link>
			</div>
		</div>
		<j-footer></j-footer>
	</div>
</template>
<script>
import JHeader from '../components/Header.vue'
import JFooter from '../components/Footer.vue'
import JIdentify from '../components/IdentifyCode.vue'
import api from '../service/api'
export default {
  components: {
    JHeader, JFooter, JIdentify
  },
  data () {
    return {
      phone: '',
      password: '',
      code: '',
      phoneTip: '',
      pwTip: '',
      codeTip: ''
    }
  },
  methods: {
    yanzheng (code1, code2) {
      const phoneReg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      const emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (this.phone === '' || !phoneReg.test(this.phone)) {
        if (!emailReg.test(this.phone)) {
          this.phoneTip = '请输入正确的手机号码或邮箱'
          return false
        } else {
          this.phoneTip = ''
        }
      } else {
        this.phoneTip = ''
      }
      const pwReg = /^(\w){6,20}$/
      if (this.password === '' || !pwReg.test(this.password)) {
        this.pwTip = '请输入正确格式的密码'
        return false
      } else {
        this.pwTip = ''
      }
      if (code1.toLowerCase() !== code2.toLowerCase()) {
        this.codeTip = '验证码不正确'
        return false
      } else {
        this.codeTip = ''
        return true
      }
    },
    body () {
      const phoneReg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      const emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      let body = ''
      if (phoneReg.test(this.phone)) {
        body = {
          phone: this.phone,
          email: '',
          password: this.password
        }
      } else if (emailReg.test(this.phone)) {
        body = {
          phone: '',
          email: this.phone,
          password: this.password
        }
      }
      const fromData = new FormData()
      for (let item in body) {
        fromData.append(item, body[item])
      }
      return fromData
    },
    subLogin () {
      // if (this.yanzheng(this.code, window.localStorage.getItem('codes'))) {
      const _body = this.body()
      console.log(_body)
      api.login(_body)
        .then(res => {
          if (res.code === '200') {
            alert(res.msg)
          } else {
            alert(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-login{
		text-align: center;
		.login-box{
			h3{
				margin: 30px auto;
			}
			/*border: 1px solid red;*/
			margin: 70px auto;
			div{
				width: 300px;
				margin-bottom: 20px;
				input{
					width: 300px;
					height: 35px;
					padding-left: 10px;
					border-radius: 5px 5px;
					box-shadow: none;
					border: 1px solid #ccc;
				}
				input:focus{
					outline:none;
					border:#87C6F9 1px solid;
					box-shadow: 0 0 8px rgba(103, 166, 217, 1);
				}
				.btn-login{
					width: 100%;
					height: 35px;
					border: none;
					background: #87C6F9;
					color: #fff;
					border-radius: 5px 5px;
				}
				span{
					display: inline-block;
					width: 300px;
					text-align: left;
					color:red;
				}
			}
			.input-code{
				overflow: hidden;
				.code{
					float: left;
					width: 150px;
				}
				.code-span{
					float: right;
					display: inline-block;
					width: 120px;
					height: 35px;
					padding-left: 10px;
					border: 1px solid red;
				}
			}
		}
	}
</style>